<template>
	<view class="content">
		<scroll-view scroll-y
		v-if="isReady"
		:style="{'height': scrollViewHeight + 'px','padding-bottom': scrollViewBottom + 'px','padding-top': scrollViewTop + 'px','box-sizing': 'border-box'}">
			<avatar :avatarUrl="topicData.avatarUrl"
			@clickAvatr="clickAvatr"
			@clickAttention="clickAttention"
			:showAttention="!topicData.isAttention && $store.user.uid != topicData.uid"
			:showPostedTime="false"
			:nickname="topicData.nickName"/>
	<!-- 		<avatar 
			:nickname="topicData.nickName"
			:avatarUrl="topicData.avatarUrl"
			:showPostedTime="false"/> -->
			<!-- <block v-for="(item, index) in GraphicList.data" :key= "index">
				<graphic-item :graphic="item" class="graphic-item"></graphic-item>
			</block> -->
			<view class="topic-container">
				<view class="topic-title">{{topicData.topicTitle}}</view>
				<view class="topic-subtitle">—— {{topicData.topicSubtitle}}</view>
				<view class="topic-content">{{topicData.topicContent}}</view>
				<view class="content-imgs flex-ali-center"
				v-if="topicData.topicImgList"
				:class="JSON.parse(topicData.topicImgList).length > 1 ? 'more-img':'only-one-img'">
					<block v-for="(item, index) in JSON.parse(topicData.topicImgList)">
						<view>
							<image @click="clickImg" 
							:src="item" mode="heightFix"
							:data-imgUrl="item"></image>
						</view>
					</block>
				</view>
				<view class="bottom-block flex-ali-center flex-juscon-bet">
					<view class="comments-wrap iconfont icon-xiaoxi2" @click="clickInput"> 说点什么</view>
					<view class="operation-wrap flex-ali-center">
						<view class="operation-item flex-ali-center" @click="clickComment">
							<view class="iconfont icon-xiaoxi2"></view>
							<view class="operation-num">{{topicData.topicDynamicNum}}</view>
						</view>
					</view>
				</view>
				<view class="comment-block" v-if="isReady">
					<block v-for="(item, index) in commentList" :key="index">
						<comments :comments="item" 
						@clickReplayComment="clickReplayComment" 
						:commentsIndex="index"
						@clickComment="clickReplayComment"
						@clickAttention="clickAttention"></comments>
					</block>
				</view>
				<view class="no-comment" v-if="isReady && !commentList.length > 0">
					暂无评论！快来抢占沙发吧~
				</view>
			</view>
		</scroll-view>
		<fun-comment-input v-if="showInput" @inputBlur="inputBlur" @clickSend="clickSend"
		@inputOnFocus="inputOnFocus"
		@linechange="linechange"></fun-comment-input>
		
	</view>
</template>

<script>
	import GraphicItem from '@/components/funScrollView/Graphic-item.vue';
	import {Topic} from '@/model/topic.js';
	import {Comment} from '@/model/comment.js';
	import funCommentInput from '@/components/chatInput/funCommentInput.vue';
	import comments from '@/components/comments/comments.vue';
	import {User} from '@/model/user.js';
	export default {
		data() {
			return {
				topicData:{},
				swiperHeight:500,
				isReady:false,
				showInput:false,
				commentList:[],
				commentContent:'',
				commentsIndex:0,
				comment:{
					commentLevel: 1,
					parentId: 0,
					topicId: 0,
					toUid: '',
					toNickname: '',
					commentContent: '',
				},
				scrollViewHeight:500,
				scrollViewBottom:0,
				scrollViewTop:0,
				oldBottom:0,
			}
		},
		components:{
			GraphicItem,
			funCommentInput,
			comments
		},
		created() {
			// uni.setNavigationBarTitle({
			//     title: '感情'
			// });
			
		},
		onLoad() {
			let res = uni.getSystemInfoSync()
			this.scrollViewHeight = res.windowHeight - uni.upx2px(20)
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('acceptDataFromOpenerPage', async e=> {
				let res = await Topic.getTopicDetaile({funId:e.id})
				this.topicData = res.data
				this.getComments(e.id)
			})
		},
		onUnload() {
			uni.$emit("topicDynamicNum",this.topicData)
			uni.$off("topicDynamicNum")
		},
		methods:{
			clickInput(){
			},
			clickComment(){
			},
			async clickAttention(uid){
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await User.attentionUser({uid:this.topicData.uid})
				uni.hideLoading()
				if(res.code != 200 ){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return 
				}
				uni.showToast({
					icon:'none',
				    title: "关注成功",
				    duration: 2000
				});
				this.topicData.isAttention = true
				console.log(this.contentViewList)
			},
			clickAvatr(){
				
			},
			async getComments(id){
				let res = await Comment.findCommentList({topicId:id})
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.commentList = res .data
				console.log(this.commentList)
				this.isReady = true
			},
			async addcomment(param){
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await Comment.addTopicComment(param)
				uni.hideLoading()
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				uni.showToast({
					icon:'none',
				    title: "评论成功",
				    duration: 2000
				});
				this.topicData.topicDynamicNum += 1
				if(param.commentLevel == 1){
					this.commentList.unshift(res.data)
					return
				}
				this.commentList[this.commentsIndex].childList.unshift(res.data)
			},
			clickInput(e){
				// console.log(e)
				this.comment.commentLevel = 1
				this.comment.parentId = 0
				this.comment.toUid = ''
				this.comment.toNickname = ''
				this.comment.commentContent = ''
				this.comment.topicId = this.topicData.id
				this.showInput = true
			},
			inputOnFocus(e){
				this.scrollViewTop = e.detail.height
				this.scrollViewBottom = uni.upx2px(100)
			},
			linechange(e){
				if(e.height > 120)
					return
				this.scrollViewBottom = this.oldBottom + e.height
			},
			inputBlur(){
				this.scrollViewTop = 0
				this.scrollViewBottom = 0
				setTimeout(e=>{
					this.showInput = false
				}, 100)
			},
			clickSend(e){
				this.comment.commentContent = e
				this.addcomment(this.comment)
			},
			clickImg(e){
				uni.previewImage({
					urls: JSON.parse(this.topicData.topicImgList),
					current:e.target.dataset.imgUrl,
					longPressActions: {
					   itemList: ['发送给朋友', '保存图片', '收藏'],
					   success: function(data) {
						   console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					   },
					   fail: function(err) {
						   console.log(err.errMsg);
					   }
					}
				});
			},
			clickReplayComment(e){
				this.commentsIndex = e.commentsIndex
				if(e.reComments.commentLevel == 1){
					this.comment.commentLevel = 2
					this.comment.parentId = e.reComments.id
					this.comment.toUid = e.reComments.uid
					this.comment.toNickname = e.reComments.nickName
					this.comment.topicId = e.reComments.shareId ? e.reComments.shareId : e.reComments.topicId
				}else{
					this.comment.commentLevel = 3
					this.comment.parentId = e.reComments.parentId
					this.comment.toUid = e.reComments.uid
					this.comment.toNickname = e.reComments.nickName
					this.comment.topicId = e.reComments.topicId
				}
				this.showInput = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		.comment-block{
			margin: 20rpx;
		}
		.scroll-view{
			box-sizing: border-box;
		}
		.topic-container{
			padding: 20rpx;
			.topic-title{
				font-size: 36rpx;
				color: #333333;
				font-weight: bolder;
				text-align: center;
			}
			.topic-subtitle{
				font-size: 24rpx;
				color: #666;
				text-align: right;
			}
			.topic-content{
				font-size: 30rpx;
				color: #333;
				margin: 10rpx 0;
			}
			.content-imgs.only-one-img{
				view{
					height: 100%;
					margin: 10rpx;
					overflow: hidden;
					image{
						max-height: 400rpx;
						max-width: 100%;
					}
				}
			}
			.content-imgs.more-img{
				flex-wrap: wrap;
				view{
					width: 30%;
					height: 200rpx;
					margin: 5rpx;
					text-align: center;
					overflow: hidden;
					background-color: #000;
					image{
						// max-width: 100%;
						max-height: 200rpx;
					}
				}
			}
		}
		.bottom-block{
			margin-top: 20rpx;
			.comments-wrap{
				font-size: 20rpx;
				color: $fun-text-9-color;
				background-color: #f2f2f2;
				width: 350rpx;
				box-sizing: border-box;
				padding: 14rpx 20rpx;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
			}
			.operation-wrap{
				font-size: 26rpx;
				color: $fun-text-9-color;
				.operation-item{
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
